<template>
  <div class="plInpt">
    <div class="titleNmae">
      <!-- <img
        class="titleImg"
        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3377302992,3361149372&fm=27&gp=0.jpg"
        alt
      /> -->
      {{lev ? '大人,此事必有蹊跷': '元芳,你怎么看?'}}
    </div>
    <div class="headerDetail">
      <input class="hd-item" type="text" v-model="userName" placeholder="请输入昵称" />
      <input class="hd-item" type="text" v-model="userEmail" placeholder="请输入邮箱(邮箱用来接收消息)" />
      <input class="hd-item" type="text" v-model="userUrl" placeholder="请输入个人网站地址" />
    </div>
    <div class="comment-text">
      <textarea name v-model="userContent" class="commentText" id cols="30" rows="10" :placeholder="lev?'@'+lev:''"></textarea>
      <div class="ct-header">
        <div class="cth-left">
          <label class="cl">{{ val1 }}</label>
          <label class="cl">+</label>
          <label class="cl">{{ val2 }}</label>
          <label class="cl">=</label>
          <input type="text" class="cl" v-model="val3" />
        </div>
        <button class="ct_can" v-if="lev" @click="onCan">取消</button>
        <button class="ct_submit" @click="addCommont">评论</button>
      </div>
    </div>
  </div>
</template>
<script>
import config from "../utils/config";
export default {
  data() {
    return {
      userName: "",
      userEmail: "",
      userUrl: "",
      userContent: "",
      val1: "",
      val2: "",
      val3: "",
      val4: "",
    };
  },
  props: ["cardid", "lev", "toid", "item"],
  methods: {
    onCan() {
      this.$emit("commonCan");
    },
    getTime(val) {
      return this.util.formatDate(val);
    },
    addCommont() {
      // 简单验证非空
      // 昵称
      if (!this.userName) {
        this.$message.error("昵称不能为空哦");
        this.randYz();
        return;
      }
      if (!this.userContent) {
        this.$message.error("评论内容不能为空");
        this.randYz();
        return;
      }
      if (this.val3 != this.val4) {
        this.$message.error("为了检测人机,请输入正确答案");
        this.randYz();
        return;
        //
      }

      let data1 = {
        username: this.userName,
        cardcontent: this.userContent,
        email: this.userEmail,
        url: this.userUrl,
        cardid: this.cardid,
        ua: navigator.userAgent.toLowerCase(),
        toid: this.item ? this.item.commontid : "",
        toEmail: this.item ? this.item.email : "",
        toName: this.item ? this.item.username : "",
        toContent: this.item ? this.item.cardcontent : "",
      };
      console.log(data1);
      this.$axios
        .post(config.BASE_URL + "/api/commont/add", data1)
        .then((res) => {
          if (res.data.c < 0) {
            this.$message.error(res.data.m);
          } else {
            this.$message.success("评论成功，通过审核即可展示", 10);

            this.userContent = "";
            this.randYz();
            this.val3 = "";
            // 存储评论信息
            let commonUser = {
              userName: this.userName,
              userEmail: this.userEmail,
              userUrl: this.userUrl,
            };
            localStorage.setItem("cUser", JSON.stringify(commonUser));
          }
        });
    },
    getAge(str) {
      return str.substring(0, 1).toUpperCase();
    },
    // 加载验证
    randYz() {
      this.val1 = parseInt(Math.random() * 10);
      this.val2 = parseInt(Math.random() * 10);
      this.val4 = this.val1 + this.val2;
    },
  },
  created() {
    this.randYz();
  },
  mounted() {
    if (localStorage.getItem("cUser")) {
      let cUser = JSON.parse(localStorage.getItem("cUser"));
      this.userName = cUser.userName;
      this.userUrl = cUser.userUrl;
      this.userEmail = cUser.userEmail;
    }
  },
};
</script>
<style scoped>
.cth-left {
  padding-left: 1rem;
}
label.cl {
  height: 2rem;
  line-height: 2rem;
  display: inline-block;
  width: 1rem;
  text-align: center;
}
input.cl {
  height: 1.2rem;
  width: 4rem;
  line-height: 1.2rem;
  /* background: rgba(245, 245, 245, 0.71); */
  border: 1px solid #ccc;
}

input.hd-item {
  width: 30%;
  border: 1px solid #ccc;
  margin: 8px 0;
  padding-left: 5px;
  font-size: 15px;
}
.titleNmae {
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 600;
}
img.titleImg {
  height: 30px;
  width: 30px;
  float: left;
  margin-right: 5px;
}
.headerDetail {
  height: 50px;
  line-height: 50px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
textarea.commentText {
  height: 100%;
  width: 100%;
  font-size: 14px;
  letter-spacing: 1px;
  border: none;
  padding: 5px;
  margin: 0;
  /* background-image: url("../../static/img/cbg.png"); */
  background-position: center;
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  box-sizing: border-box;
  display: block;
}
.commentText:focus {
  background: none;
  background-color: #fff;
}
.ct-header {
  height: 40px;
  /* background: gray; */
  position: relative;
  border-top: 1px solid #ccc;
}
.comment-text {
  width: 100%;
  margin: 0 auto;
  border: 1px solid #ccc;
}

.ct_submit,
.ct_can {
  position: absolute;
  width: 80px;
  height: 30px;
  top: 50%;
  right: 10px;
  border-radius: 2px;
  margin-top: -15px;
  background: #6280e1;
  color: #fff;
  cursor: pointer;
  border: none;
}

.cl-header {
  height: 25px;
  line-height: 25px;
  margin-top: 10px;
  border-bottom: 1px solid #ccc;
}
.cl-content {
  text-align: center;
  padding: 10px;
  color: #6280e1;
}
</style>